import { useSnapshot } from 'valtio';
import { Form, Checkbox } from 'szcd';
import { type IControlView } from '../base';
import { type Option } from '../../types';

export interface ICheckboxView extends IControlView {
  options: Option[]
  value: string[];
  onChange?: (value: string[]) => void
}

const CheckboxControl: React.FC<{ service: ICheckboxView } & React.HTMLAttributes<HTMLDivElement>> = ({
  service,
  ...restProps
}) => {
  const snap = useSnapshot(service, { sync: true });

  return (
    <Form.Item label={snap.label && service.label} style={restProps.style}>
      <Checkbox.Group
        options={snap.options as Option[]}
        value={snap.value as string[]}
        onChange={(val) => {
          service.onChange?.(val as string[]);
        }}
      />
    </Form.Item>
  );
};

export default CheckboxControl;
